<!-- Created Time:23/07/26 16:50:25 -->
<!-- Created By: Mande.Huang-->
<!-- Description: -->
<template>
  <window :softID="softID">
    <template v-slot:contain>
      <div class="container">
        <div class="form">
          <el-form label-width="80px">
            <el-form-item label="软件名称">
              <el-input style="width: 400px" v-model="softName"></el-input>
            </el-form-item>
            <el-form-item label="软件菜单">
              <el-input style="width: 400px" v-model="softMenuInfo"></el-input>
            </el-form-item>
            <el-form-item label="软件图片">
              <el-upload
                class="upload-demo"
                action="http://localhost:5001/software/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="SetIconUrl"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button @click="SendMessage">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </window>
</template>

<script>
export default {
  name: "CreateSoft",
  props: ["softID"],
  data() {
    return {
      softDate: {},
      softMenuInfo: "",
      softName: "",
      iconUrl: "",
      fileList: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    SetIconUrl(res) {
      this.iconUrl = res.result.iconUrl;
    },
    async SendMessage() {
      let arr = this.softMenuInfo.split(" ");
      const data = {
        softName: this.softName,
        softMenuInfo: arr,
        iconUrl: this.iconUrl,
      };
      try {
        const res = await this.http.post("/software", data);
        if (res.data.code == 0) {
          this.$message({
            message: "创建软件成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "创建文件失败",
            type: "error",
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  .form {
    width: 80%;
    background-color: #fff;
    justify-content: center;
  }
}
</style>
